<template>
    <div class="garbage-class">
        <!--地图-->
        <div id="myMap"></div>
        <!-- 头部区域 -->
        <header>
            <div class="header-bg">生活垃圾分类综合监管平台</div>
            <!-- 右上角“展开”、“收起”按钮 -->
            <div class="collapse-box">
                <img id="openPage" src="../../assets/img/garbageClass/open.png" alt="展开" @click="collapsePage(1)">
                <img id="closePage" src="../../assets/img/garbageClass/close.png" alt="收起" @click="collapsePage(2)">
            </div>
            <!-- 主界面切换按钮 -->
            <ul class="main-switch">
                <li id="leftButton" class="left-button" @click="mainButtonSwitch(1)">执法检查情况</li>
                <li id="rightButton" class="right-button" @click="mainButtonSwitch(2)">单位检查等级划分</li>
            </ul>
        </header>
        <!-- 主体内容 -->
        <section class="main-box">
            <div class="content-area">
                <!-- 左区域块 -->
                <div class="left-content-row">
                    <div id="firstContentBox">
                        <!-- 执法检查情况 -->
                        <div class="border-box law-inspect">
                            <div class="top-title">执法检查情况</div>
                            <div id="endTime">截至：2020 / 9 / 14</div>
                            <div class="overflow-box">
                                <ul class="inspect-number">
                                    <li>
                                        <p class="number-p">
                                            <span id="checkNumber">268</span>
                                            <span class="number-unit">个</span>
                                        </p>
                                        <p class="name-p">
                                            <span>检查单位总数</span>
                                        </p>
                                    </li>
                                    <li>
                                        <p class="number-p">
                                            <span id="dayNumber">21</span>
                                            <span class="number-unit">个</span>
                                        </p>
                                        <p class="name-p">
                                            <span>今日检查总数</span>
                                        </p>
                                    </li>
                                </ul>
                                <div class="block-item-name">实时动态数据</div>
                                <ul id="nowTableList" class="dynamic-data"></ul>
                            </div>
                            <div class="panel-footer"></div>
                        </div>
                        <!-- 每日检查单位数据统计 -->
                        <div class="border-box every-day-chart">
                            <div class="overflow-box">
                                <div class="block-item-name">每日检查单位数据统计</div>
                                <div id="unitInspectChart"></div>
                            </div>
                            <div class="panel-footer"></div>
                        </div>
                    </div>
                    <div id="secondContentBox">
                        <!-- 单位检查等级划分 -->
                        <div class="border-box gradation">
                            <div class="top-title">单位检查等级划分</div>
                            <div id="startEndTime">09 / 14 - 09 / 21</div>
                            <div class="overflow-box">
                                <ul class="company-number">
                                    <li>
                                        <p class="number-p">
                                            <span id="superiorNumber">147</span>
                                            <span class="number-unit">个</span>
                                        </p>
                                        <p class="name-p">
                                            <span>优等单位总数</span>
                                        </p>
                                    </li>
                                    <li>
                                        <p class="number-p">
                                            <span id="goodNumber">94</span>
                                            <span class="number-unit">个</span>
                                        </p>
                                        <p class="name-p">
                                            <span>良好单位总数</span>
                                        </p>
                                    </li>
                                    <li>
                                        <p class="number-p">
                                            <span id="commonlyNumber">6</span>
                                            <span class="number-unit">个</span>
                                        </p>
                                        <p class="name-p">
                                            <span>一般单位总数</span>
                                        </p>
                                    </li>
                                    <li>
                                        <p class="number-p">
                                            <span id="noCheckNumber">21</span>
                                            <span class="number-unit">个</span>
                                        </p>
                                        <p class="name-p">
                                            <span>未检查单位总数</span>
                                        </p>
                                    </li>
                                </ul>
                                <div id="inspectCompany"></div>
                            </div>
                            <div class="panel-footer"></div>
                        </div>
                        <!-- 单位检查等级情况 -->
                        <div class="border-box conpany-inspect-list">
                            <div class="block-item-name">单位检查等级情况</div>
                            <div id="dynamicList" class="dynamic-data">
                                <ul id="dynamicListBox"></ul>
                                <ul id="dynamicListBox1"></ul>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 中间区域块 -->
                <div class="center-content-row"></div>
                <!-- 右区域块 -->
                <div class="right-content-row">
                    <!-- 单位检查问题统计 -->
                    <div class="border-box problem-statistics">
                        <div class="overflow-box">
                            <div class="block-item-name">单位检查问题统计</div>
                            <ul class="problem-list">
                                <li>
                                    <span class="number"><span class="num-number num-one">1</span></span>
                                    <span class="describe">制定生活垃圾分类日常管理制度。</span>
                                    <span class="percentage">5%</span>
                                </li>
                                <li>
                                    <span class="number"><span class="num-number num-two">2</span></span>
                                    <span class="describe">建立管理台账。</span>
                                    <span class="percentage">5%</span>
                                </li>
                                <li>
                                    <span class="number"><span class="num-number num-three">3</span></span>
                                    <span class="describe">开展生活垃圾分类知识宣传。</span>
                                    <span class="percentage">5%</span>
                                </li>
                                <li>
                                    <span class="number"><span class="num-number num-other">4</span></span>
                                    <span class="describe">规范设置生活垃圾分类收集容器。</span>
                                    <span class="percentage">5%</span>
                                </li>
                                <li>
                                    <span class="number"><span class="num-number num-other">5</span></span>
                                    <span class="describe">明确不同种类生活垃圾投放时间、地点、分类收集和贮存。</span>
                                    <span class="percentage">5%</span>
                                </li>
                                <li>
                                    <span class="number"><span class="num-number num-other">6</span></span>
                                    <span class="describe">个人是否按照生活垃圾分类管理人公告要求进行投放。</span>
                                    <span class="percentage">5%</span>
                                </li>
                                <li>
                                    <span class="number"><span class="num-number num-other">7</span></span>
                                    <span class="describe">对不符合投放要求的行为，予以劝告、制止。</span>
                                    <span class="percentage">5%</span>
                                </li>
                                <li>
                                    <span class="number"><span class="num-number num-other">8</span></span>
                                    <span class="describe">生活垃圾是否交由有资质的单位进行收集运输。</span>
                                    <span class="percentage">5%</span>
                                </li>
                                <li>
                                    <span class="number"><span class="num-number num-other">9</span></span>
                                    <span class="describe">已分类投放的生活垃圾是否有混合收集的现象。</span>
                                    <span class="percentage">5%</span>
                                </li>
                                <li>
                                    <span class="number"><span class="num-number num-other">10</span></span>
                                    <span class="describe">已分类投放的生活垃圾是否有混合运输的现象。</span>
                                    <span class="percentage">5%</span>
                                </li>
                                <li>
                                    <span class="number"><span class="num-number num-other">11</span></span>
                                    <span class="describe">生活垃圾收集、运输后是否复位收集容器并清洁作业场地。</span>
                                    <span class="percentage">5%</span>
                                </li>
                            </ul>
                        </div>
                        <div class="panel-footer"></div>
                    </div>
                    <!-- 单位检查等级情况统计 -->
                    <div class="border-box situation-statistics">
                        <div class="overflow-box">
                            <div class="block-item-name">单位检查等级情况统计</div>
                            <div id="situationChart"></div>
                        </div>
                        <div class="panel-footer"></div>
                    </div>
                    <!-- 检查单位红黑榜 -->
                    <div class="border-box red-black">
                        <div class="overflow-box">
                            <div class="block-item-name">检查单位红黑榜</div>
                            <ul class="switch-button">
                                <li id="redList" class="select-yes" @click="redBlackList(1)">红榜</li>
                                <li id="blackList" class="select-no" @click="redBlackList(2)">黑榜</li>
                            </ul>
                            <ul class="list-box"></ul>
                        </div>
                        <div class="panel-footer"></div>
                    </div>
                </div>
            </div>
        </section>
        <!--图例-->
        <div id="legend" class="ntl" style="display: block;">
            <p><i style="background: #502BC6;"></i> 已检查</p>
            <p><i style="background: #026CBF;"></i> 未检查</p>
            <!-- <p><i style="background: #3E5A93;"></i> 未覆盖</p> -->
            <!-- <p><img th:src="@{/ljfl/img/lawFullscreen/grade1.png}"> 优等</p>
            <p><img th:src="@{/ljfl/img/lawFullscreen/grade2.png}"> 良好</p>
            <p><img th:src="@{/ljfl/img/lawFullscreen/grade3.png}"> 一般</p> -->

            <p><i style="background: #03ac57;"></i> 优等</p>
            <p><i style="background: #f19900;"></i> 良好</p>
            <p><i style="background: #f10078;"></i> 一般</p>
        </div>
        <div class="el-dialog__wrapper">
            <div class="el-dialog">
                <div class="el-dialog__header">
                    <div class="toolbox">
                        <span class="screen-dialog">
                            <img id="screen" src="../../assets/img/garbageClass/screen.png" alt="全屏" @click="isShowFullDialog()">
                            <img id="outScreen" src="../../assets/img/garbageClass/out-screen.png" alt="退出全屏" @click="isShowFullDialog()">
                        </span>
                        <span class="close-dialog">
                            <img src="../../assets/img/garbageClass/close-dialog.png" alt="关闭" @click="closeDialog">
                        </span>
                    </div>
                    <span class="dialog-name"></span>
                    <ul>
                        <li id="lawInspection" class="yes-select" @click="lawInspection()">执法检查</li>
                        <li id="essentialInfo" class="no-select" @click="essentialInfo()">基本信息</li>
                        <li id="garbage" class="no-select" @click="garbage()">垃圾桶布设</li>
                    </ul>
                </div>
                <div class="el-dialog__body">
                    <div id="dialogContent" class="dialog-content">
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import geoJSON from '../../assets/js/json'
    import geoJSON1 from '../../assets/js/json1'
    export default {
        name: "GarbageClass",
        data () {
            return {
                // 0 —— 执法检查情况；1 —— 单位检查等级划分
                bigBlockIndex: 0,
                // 内容是否收起  true —— 展开；false —— 收起
                collapseBool: true,
                // 地图
                GDMap: null,
                dialogMap: null,
                // 是否全屏
                isFullScreen: false,
                // 定时器
                MyMar: null,
                // 小区数据
                nowListData: [
                    {"name": "高科·朗山小区", "fraction": "100", "time": "2020/12/14 12:12:52"},
                    {"name": "逸翠园四期", "fraction": "100", "time": "2020/12/14 11:43:59"},
                    {"name": "丹轩梓园小区", "fraction": "100", "time": "2020/12/14 11:01:49"},
                    {"name": "枫叶新家园", "fraction": "100", "time": "2020/12/14 10:58:15"},
                    {"name": "城市风景夏日景色", "fraction": "100", "time": "2020/12/14 10:55:11"},
                    {"name": "丹轩坊小区", "fraction": "80", "time": "2020/12/14 09:58:34"},
                    {"name": "香榭兰庭小区", "fraction": "90", "time": "2020/12/14 09:42:05"},
                    {"name": "高科广场D座", "fraction": "85", "time": "2020/12/14 09:23:41"},
                    {"name": "糖果SOHO小区", "fraction": "75", "time": "2020/12/14 09:09:54"},
                    {"name": "启源缤纷南郡幼儿园", "fraction": "65", "time": "2020/12/14 09:06:26"}
                ],
                // 小区名
                nowListDataName: ["高科·朗山小区", "逸翠园四期", "丹轩梓园小区", "枫叶新家园", "城市风景夏日景色", "丹轩坊小区", "香榭兰庭小区", "高科广场D座", "糖果SOHO小区", "启源缤纷南郡幼儿园", "华融国际", "MOMOPARK", "枫林绿洲"],
                // 弹出层type
                dialogType: null,
                // 列表定时器
                setTimeoutList: null,
            }
        },
        methods: {
            /**
             * Description:关闭弹出层
             * Author:ybt
             * Date:2020/12/18
             */
            closeDialog(){
                $('.el-dialog__wrapper').removeClass('animate__zoomIn').addClass('animate__animated animate__zoomOut');
                setTimeout( () => {
                    $('.el-dialog__wrapper').hide();
                }, 400);
                if (this.isFullScreen) {
                    // 是否全屏显示弹出层
                    this.isShowFullDialog();
                }
            },
            /**
             * Description:是否全屏显示弹出层
             * Author:ybt
             * Date:2020/12/18
             */
            isShowFullDialog(){
                let el = document.getElementsByClassName('el-dialog')[0];
                let rfs =
                    el.requestFullScreen ||
                    el.webkitRequestFullScreen ||
                    el.mozRequestFullScreen ||
                    el.msRequestFullscreen;
                if (!this.isFullScreen) {
                    if (typeof rfs != 'undefined' && rfs) {
                        rfs.call(el)
                    }
                    this.isFullScreen = true;
                    $('#screen').css('display', 'none');
                    $('#outScreen').css('display', 'block');
                } else if (this.isFullScreen) {
                    if (document.exitFullscreen) {
                        document.exitFullscreen();
                    } else if (document.mozCancelFullScreen) {
                        document.mozCancelFullScreen();
                    } else if (document.webkitCancelFullScreen) {
                        document.webkitCancelFullScreen();
                    } else if (document.msExitFullscreen) {
                        document.msExitFullscreen();
                    }
                    this.isFullScreen = false;
                    $('#screen').css('display', 'block');
                    $('#outScreen').css('display', 'none');
                }
            },
            /**
             * Description:高德地图初始化
             * Author:ybt
             * Date:2020/12/18
             */
            initMap(data) {
                if(this.GDMap){
                    this.GDMap.destroy();
                    this.GDMap = null;
                }

                this.GDMap = new AMap.Map("myMap", {
                    mapStyle: "amap://styles/6f8a9c431c03a423de43182d250f1a75",
                    zoom: 18,
                    viewMode: "3D",
                    center: [108.880729032214,34.207253369619],
                    features: ["bg", "road", "building"],
                    resizeEnable: true
                });
                this.geoJson(data);
            },
            /**
             * Description:画面
             * Author:ybt
             * Date:2020/12/18
             */
            geoJson(data){
                let _this = this;
                // 加载面数据
                let geojson = new AMap.GeoJSON({
                    geoJSON: data,
                    // 还可以自定义getMarker和getPolyline
                    getPolygon: function(geojson, lnglats) {
                        let properties = geojson.properties._parentProperities?geojson.properties._parentProperities:geojson.properties;
                        let polygon = new AMap.Polygon({
                            path: lnglats,
                            strokeColor: '',
                            fillColor: properties.socre && properties.socre != 0 ? '#502bc6' : '#026CBF'
                        });
                        if (properties.socre && properties.socre != 0) {
                            let center = polygon.getBounds().getCenter();
                            let marker = new AMap.Text({
                                map: _this.GDMap,
                                position: center,
                                text: properties.socre,
                                style: {
                                    'background-color': properties.socre > 80 ? '#03ac57' : properties.socre > 60 ? '#f19900' : '#f10078',
                                    'width': '25px',
                                    'height': '25px',
                                    'border': 'none',
                                    'font-size': '0.15rem',
                                    'text-align': 'center',
                                    'line-height': '25px',
                                    'padding': '0px'
                                }
                            });
                        }
                        return polygon;
                    }
                });
                geojson.setMap(this.GDMap);
                //    GDMap.setFitView();// 执行定位
                this.GDMap.setZoom(15);
            },
            /**
             * Description:监听“展开”、“收起”按钮操作
             * Author:ybt
             * Date:2020/12/17
             */
            collapsePage(type){
                if (type === 1) {
                    this.collapseBool = true;
                    $('#openPage').css('display', 'none');
                    $('#closePage').css('display', 'block');
                    if (this.bigBlockIndex === 0) {
                        $('#firstContentBox').css('transform', 'translateX(0rem)');
                        $('#firstContentBox').css('transition', 'transform 0.4s');
                        $('#legend').css('transform', 'translateX(0rem)');
                        $('#legend').css('transition', 'transform 0.4s');
                    } else if (this.bigBlockIndex === 1) {
                        $('#secondContentBox').css('transform', 'translateX(7.65rem)');
                        $('#secondContentBox').css('transition', 'transform 0.4s');
                        $('.right-content-row').css('transform', 'translateX(-7.65rem)');
                        $('.right-content-row').css('transition', 'transform 0.4s');
                        $('#legend').css('transform', 'translateX(-7.65rem)');
                        $('#legend').css('transition', 'transform 0.4s');
                    }
                } else if (type === 2) {
                    this.collapseBool = false;
                    $('#openPage').css('display', 'block');
                    $('#closePage').css('display', 'none');
                    if (this.bigBlockIndex === 0) {
                        $('#firstContentBox').css('transform', 'translateX(-7.65rem)');
                        $('#firstContentBox').css('transition', 'transform 0.4s');
                        $('#legend').css('transform', 'translateX(0rem)');
                        $('#legend').css('transition', 'transform 0.4s');
                    } else if (this.bigBlockIndex === 1) {
                        $('#secondContentBox').css('transform', 'translateX(0rem)');
                        $('#secondContentBox').css('transition', 'transform 0.4s');
                        $('.right-content-row').css('transform', 'translateX(0rem)');
                        $('.right-content-row').css('transition', 'transform 0.4s');
                        $('#legend').css('transform', 'translateX(0rem)');
                        $('#legend').css('transition', 'transform 0.4s');
                    }
                }
            },
            /**
             * Description:监听主按钮切换操作
             * Author:ybt
             * Date:2020/12/18
             */
            mainButtonSwitch(type){
                if (type === 1) {
                    if (this.MyMar !== null) {
                        clearInterval(this.MyMar);
                        this.MyMar = null;
                    }
                    this.bigBlockIndex = 0;
                    $('#leftButton').css('background', 'url(' + require('../../assets/img/garbageClass/left-switch-block1.png') + ') no-repeat');
                    $('#rightButton').css('background', 'url(' + require('../../assets/img/garbageClass/right-switch-block2.png') + ') no-repeat');
                    // 初始化高德地图
                    this.initMap(geoJSON);
                    this.initNowListData();
                    if (this.collapseBool) {
                        $('#secondContentBox').css('transform', 'translateX(0rem)');
                        $('#secondContentBox').css('transition', 'transform 0.4s');
                        $('.right-content-row').css('transform', 'translateX(0rem)');
                        $('.right-content-row').css('transition', 'transform 0.4s');
                        $('#legend').css('transform', 'translateX(0rem)');
                        $('#legend').css('transition', 'transform 0.4s');
                        setTimeout( () => {
                            $('#firstContentBox').css('display', 'block');
                            $('#secondContentBox').css('display', 'none');
                        }, 400);
                        setTimeout( () => {
                            $('#firstContentBox').css('transform', 'translateX(0rem)');
                            $('#firstContentBox').css('transition', 'transform 0.4s');

                        }, 500)
                    } else if (!this.collapseBool) {
                        this.collapseBool = true;
                        $('#openPage').css('display', 'none');
                        $('#closePage').css('display', 'block');
                        $('#firstContentBox').css('display', 'block');
                        $('#secondContentBox').css('display', 'none');
                        setTimeout( () => {
                            $('#firstContentBox').css('transform', 'translateX(0rem)');
                            $('#firstContentBox').css('transition', 'transform 0.4s');
                            $('#legend').css('transform', 'translateX(0rem)');
                            $('#legend').css('transition', 'transform 0.4s');
                        }, 100)
                    }
                } else if (type === 2) {
                    if (this.setTimeoutList !== null) {
                        clearTimeout(this.setTimeoutList);
                        this.setTimeoutList = null;
                    }
                    this.bigBlockIndex = 1;
                    $('#leftButton').css('background', 'url(' + require('../../assets/img/garbageClass/left-switch-block2.png') + ') no-repeat');
                    $('#rightButton').css('background', 'url(' + require('../../assets/img/garbageClass/right-switch-block1.png') + ') no-repeat');
                    // 初始化高德地图
                    this.initMap(geoJSON1);
                    if (this.collapseBool) {
                        $('#firstContentBox').css('transform', 'translateX(-7.65rem)');
                        $('#firstContentBox').css('transition', 'transform 0.4s');
                        setTimeout( () => {
                            $('#firstContentBox').css('display', 'none');
                            $('#secondContentBox').css('display', 'block');
                        }, 400);
                        setTimeout( () => {
                            $('#secondContentBox').css('transform', 'translateX(7.65rem)');
                            $('#secondContentBox').css('transition', 'transform 0.4s');
                            $('.right-content-row').css('transform', 'translateX(-7.65rem)');
                            $('.right-content-row').css('transition', 'transform 0.4s');
                            $('#legend').css('transform', 'translateX(-7.65rem)');
                            $('#legend').css('transition', 'transform 0.4s');
                            // 初始化单位检查单位统计图
                            this.initCompanyChart();
                            // 初始化“单位检查等级情况统计”统计图
                            this.initSituationChart();
                        }, 500)
                    } else if (!this.collapseBool) {
                        this.collapseBool = true;
                        $('#openPage').css('display', 'none');
                        $('#closePage').css('display', 'block');
                        $('#firstContentBox').css('display', 'none');
                        $('#secondContentBox').css('display', 'block');
                        setTimeout( () => {
                            $('#secondContentBox').css('transform', 'translateX(7.65rem)');
                            $('#secondContentBox').css('transition', 'transform 0.4s');
                            $('.right-content-row').css('transform', 'translateX(-7.65rem)');
                            $('.right-content-row').css('transition', 'transform 0.4s');
                            $('#legend').css('transform', 'translateX(-7.65rem)');
                            $('#legend').css('transition', 'transform 0.4s');
                        }, 100)
                    }
                    // 单位检查等级情况列表数据
                    this.initUnitList();
                }
            },
            /**
             * Description:渲染“实时动态数据”表格数据
             * Author:ybt
             * Date:2020/12/18
             */
            initNowListData(){
                let dynamicHtml = '';
                this.nowListData.forEach((item, index) => {
                    dynamicHtml += '<li>'
                        +'<span>'+ (index+1) +'</span>'
                        +'<span title="'+ item.name +'">'+ item.name +'</span>'
                        +'<span class="showDialog" onclick="showDialog()">'
                        +'<span class="score">'+ item.fraction +'</span>';
                    if (item.fraction > 80) {
                        dynamicHtml += '<span class="grade1">（优等）</span>';
                    } else if (item.fraction > 60) {
                        dynamicHtml += '<span class="grade2">（良好）</span>';
                    } else {
                        dynamicHtml += '<span class="grade3">（一般）</span>';
                    }
                    dynamicHtml += '</span>'
                        +'<span>'+ item.time +'</span>'
                        +'</li>';
                });
                $('#nowTableList').html(dynamicHtml);
                if (this.setTimeoutList !== null) {
                    clearTimeout(this.setTimeoutList);
                    this.setTimeoutList = null;
                }
                this.setTimeoutList = setTimeout(() => {
                    let copyName = "";
                    this.nowListDataName.forEach((item, index) => {
                        if (this.nowListData[9].name === item) {
                            if (index !== 12) {
                                copyName = this.nowListDataName[index + 1]
                            } else {
                                copyName = this.nowListDataName[0]
                            }
                        }
                    });
                    let date = new Date();
                    let y = date.getFullYear();
                    let m = (date.getMonth() + 1).toString().padStart(2, '0');
                    let d = date.getDate().toString().padStart(2, '0');
                    let h = date.getHours().toString().padStart(2, '0');
                    let min = date.getMinutes().toString().padStart(2, '0');
                    let s = date.getSeconds().toString().padStart(2, '0');
                    let result = y + "/" + m + "/" + d + " " + h + ":" + min + ":" + s;
                    let numberArray = ["100", "90", "70", "60", "95", "30", "85", "95", "75"];
                    let dataObject = {
                        "name": copyName,
                        "fraction": numberArray[Math.floor(Math.random() * numberArray.length)],
                        "time": result
                    };
                    this.nowListData.splice(this.nowListData.length - 1, 1);
                    this.nowListData.unshift(dataObject);
                    this.initNowListData();
                }, 2000);
                // 点击显示弹出层
                window.showDialog = () => {
                    $('#lawInspection').removeClass('no-select').addClass('yes-select');
                    $('#essentialInfo').removeClass('yes-select').addClass('no-select');
                    $('#garbage').removeClass('yes-select').addClass('no-select');
                    $('.el-dialog__wrapper').removeClass('animate__zoomOut').addClass('animate__animated animate__zoomIn');
                    $('.el-dialog__wrapper').show();
                    $('.el-dialog__wrapper').css('opacity', '1');
                    $('.dialog-content').removeClass('amap-container');
                    $('.dialog-content').css('background', 'none');
                    this.dialogType = 1;
                    this.clickLawInspection(1);
                }
            },
            /**
             * Description:初始化“每日检查单位数据统计”统计图
             * Author:ybt
             * Date:2020/12/18
             */
            initInspectChart(){
                let myChart = this.$echarts.init(document.getElementById('unitInspectChart'));
                let option = {
                    grid: {
                        left: '3%',
                        right: '3%',
                        top: '10%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        data: ['12-07', '12-08', '12-09', '12-10', '12-11', '12-12', '12-13', '12-14'],
                        // 坐标轴刻度标签
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: '#fff',
                                fontSize: 14
                            }
                        },
                        // 坐标区域分割线
                        splitLine: {
                            show: true,
                            lineStyle: {
                                type: 'dashed',
                                color: '#4b8aaa'
                            }
                        },
                        // 坐标轴轴线
                        axisLine: {
                            lineStyle: {
                                color: '#1f98e5'
                            }
                        }
                    },
                    yAxis: [
                        {
                            type: 'value',
                            // 坐标轴刻度标签
                            axisLabel: {
                                textStyle: {
                                    color: '#64cefe'
                                },
                                fontSize: 10,
                                verticalAlign: 'center'
                            },
                            // 坐标区域分割线
                            splitLine: {
                                show: true,
                                lineStyle: {
                                    type: 'dashed',
                                    color: '#4b8aaa'
                                }
                            },
                            // 坐标轴轴线
                            axisLine: {
                                lineStyle: {
                                    color: '#1f98e5'
                                }
                            }
                        }
                    ],
                    series: [
                        {
                            name: '',
                            color: '#f44147',
                            data: [17, 27, 31, 39, 58, 38, 37, 21],
                            type: 'line',
                            symbol: 'circle', //折线拐点去掉圆点
                            symbolSize: 10,
                            smooth: true,  //true 为平滑曲线，false为直线
                            label: {
                                show: true,
                                color: '#fda72b',
                                fontSize: 14
                            },
                            lineStyle: {
                                width: 3
                            }
                        }
                    ]
                };
                //使用制定的配置项和数据显示图表
                myChart.setOption(option);
                window.addEventListener('resize',function () {
                    myChart.resize()
                })
            },
            /**
             * Description:初始化单位检查单位统计图
             * Author:ybt
             * Date:2020/12/18
             */
            initCompanyChart(){
                let myChart = this.$echarts.init(document.getElementById('inspectCompany'));
                let sData = [{
                    name: "优等单位占比      54.85%",
                    value: "147"
                }, {
                    name: "良好单位占比      35.07%",
                    value: "94"
                }, {
                    name: "一般单位占比      2.24%",
                    value: "6"
                }, {
                    name: "未检查单位占比   7.84%",
                    value: "21"
                }];
                let colorList = ['#36d65d', '#e9a725', '#e94b91', '#cecece'];
                let option = {
                    tooltip: {
                        trigger: 'item',
                        show: true
                    },
                    legend: {
                        type: "scroll",
                        orient: 'vertical',
                        icon: 'square',
                        right: '12%',
                        align: 'left',
                        top: 'center',
                        itemGap: 20,
                        // bottom:'50%',
                        textStyle: {
                            color: '#ffffff',
                            fontSize: 16,
                        },
                        data: sData
                    },
                    series: [{
                        type: 'pie',
                        z: 3,
                        center: ['25%', '50%'],
                        radius: ['58%', '70%'],
                        clockwise: true,
                        avoidLabelOverlap: true,
                        hoverOffset: 15,
                        itemStyle: {
                            normal: {
                                color: function(params) {
                                    return colorList[params.dataIndex]
                                }
                            }
                        },
                        label: {
                            normal: {
                                rich: {
                                    a: {
                                        color: '#fff',
                                        align: 'center',
                                        fontSize: 54,
                                        fontFamily: 'Agency FB',
                                        fontWeight: "bold"
                                    },
                                    b: {
                                        color: '#fff',
                                        align: 'center',
                                        fontSize: 16,
                                        fontFamily: 'Agency FB'
                                    },
                                    c: {
                                        color: '#fff',
                                        align: 'center',
                                        fontSize: 20
                                    }
                                },
                                formatter: function(params) {
                                    if (params.dataIndex === 2) {
                                        return "{a|268}{b|个}\n" + "{c|检查单位}";
                                    } else {
                                        return ''
                                    }
                                },
                                position: 'center',
                                show: true
                            }
                        },
                        data: sData
                    }]
                };
                //使用制定的配置项和数据显示图表
                myChart.setOption(option);
                window.addEventListener('resize',function () {
                    myChart.resize()
                })
            },
            /**
             * Description:初始化“单位检查等级情况统计”统计图
             * Author:ybt
             * Date:2020/12/18
             */
            initSituationChart(){
                let myChart = this.$echarts.init(document.getElementById('situationChart'));
                let option = {
                    legend: {
                        show: true,
                        type: 'plain',
                        top: 10,
                        right: 10,
                        data: ['优等', '良好', '一般'],
                        textStyle: {
                            color: '#fefafc'
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '3%',
                        top: '20%',
                        bottom: '3%',
                        containLabel: true
                    },
                    tooltip: {
                        show: true,
                        trigger: 'item'
                    },
                    xAxis: {
                        type: 'category',
                        data: ['12-09', '12-10', '12-11', '12-12', '12-13', '12-14'],
                        // 坐标轴刻度标签
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: '#fff',
                                fontSize: 14
                            }
                        },
                        // 坐标区域分割线
                        splitLine: {
                            show: true,
                            lineStyle: {
                                type: 'dashed',
                                color: '#4b8aaa'
                            }
                        },
                        // 坐标轴轴线
                        axisLine: {
                            lineStyle: {
                                color: '#1f98e5'
                            }
                        }
                    },
                    yAxis: [
                        {
                            type: 'value',
                            // 坐标轴刻度标签
                            axisLabel: {
                                textStyle: {
                                    color: '#64cefe'
                                },
                                fontSize: 10,
                                verticalAlign: 'center'
                            },
                            // 坐标区域分割线
                            splitLine: {
                                show: true,
                                lineStyle: {
                                    type: 'dashed',
                                    color: '#4b8aaa'
                                }
                            },
                            // 坐标轴轴线
                            axisLine: {
                                lineStyle: {
                                    color: '#1f98e5'
                                }
                            }
                        }
                    ],
                    series: [
                        {
                            name: '优等',
                            color: '#36d65d',
                            data: [9, 15, 17, 27, 32, 25, 22],
                            type: 'line',
                            symbol: 'circle', //折线拐点去掉圆点
                            symbolSize: 5,
                            lineStyle: {
                                width: 2
                            }
                        },
                        {
                            name: '良好',
                            color: '#e9a725',
                            data: [8, 10, 14, 12, 22, 13, 15],
                            type: 'line',
                            symbol: 'circle', //折线拐点去掉圆点
                            symbolSize: 5,
                            lineStyle: {
                                width: 2
                            }
                        },
                        {
                            name: '一般',
                            color: '#e94b91',
                            data: [0, 2, 0, 0, 4, 0, 0],
                            type: 'line',
                            symbol: 'circle', //折线拐点去掉圆点
                            symbolSize: 5,
                            lineStyle: {
                                width: 2
                            }
                        }
                    ]
                };
                //使用制定的配置项和数据显示图表
                myChart.setOption(option);
                window.addEventListener('resize',function () {
                    myChart.resize()
                })
            },
            /**
             * Description:红黑榜表单切换操作
             * Author:ybt
             * Date:2020/12/18
             */
            redBlackList(type){
                if (type === 1) {
                    $('#redList').removeClass('select-no').addClass('select-yes');
                    $('#blackList').removeClass('select-yes').addClass('select-no');
                } else if (type === 2) {
                    $('#redList').removeClass('select-yes').addClass('select-no');
                    $('#blackList').removeClass('select-no').addClass('select-yes');
                }
                let redListData = [
                    {"name":'枫叶新家园', "score":100, "level":'优等'},
                    {"name":'逸翠园四期', "score":100, "level":'优等'},
                    {"name":'高科·朗山小区', "score":100, "level":'优等'},
                    {"name":'城市风景夏日景色', "score":100, "level":'优等'},
                    {"name":'丹轩梓园小区', "score":100, "level":'优等'},
                ];
                let blackListData = [
                    {"name":'法士特家属区', "score":15, "level":'一般'},
                    {"name":'鸿景花园', "score":25, "level":'一般'},
                    {"name":'龙城铭园', "score":30, "level":'一般'},
                    {"name":'心桥佳苑', "score":40, "level":'一般'},
                    {"name":'左岸春天小区', "score":45, "level":'一般'},
                ];

                if (type === 1) {
                    let redHtml='';
                    redListData.forEach((item, index) => {
                        redHtml += '<li>'
                            +'<span class="number"><span class="num-number num-' + (index + 1) + '">' + (index + 1) + '</span></span>'
                            +'<span class="name">'+ item.name +'</span>'
                            +'<span class="fraction">'+ item.score +'分</span>'
                            +'<span class="grade grade1">'+ item.level +'</span>'
                            +'</li>';
                    });
                    $('.list-box').html(redHtml);
                } else if (type === 2) {
                    let blackHtml='';
                    blackListData.forEach((item, index) => {
                        blackHtml += '<li>'
                            +'<span class="number"><span class="num-number num-' + (index + 1) + '">' + (index + 1) + '</span></span>'
                            +'<span class="name">'+ item.name +'</span>'
                            +'<span class="fraction">'+ item.score +'分</span>'
                            +'<span class="grade grade3">'+ item.level +'</span>'
                            +'</li>';
                    });
                    $('.list-box').html(blackHtml);
                }
            },
            /**
             * Description:弹出层模块切换
             * Author:ybt
             * Date:2020/12/18
             */
            lawInspection(){
                $('#lawInspection').removeClass('no-select').addClass('yes-select');
                $('#essentialInfo').removeClass('yes-select').addClass('no-select');
                $('#garbage').removeClass('yes-select').addClass('no-select');
                $('.dialog-content').removeClass('amap-container');
                $('.dialog-content').css('background', 'none');
                if(this.dialogType === 1){
                    this.clickLawInspection(1);
                }
                if(this.dialogType === 2){
                    this.clickLawInspection(2);
                }
                if(this.dialogType === 3){
                    this.clickLawInspection(3);
                }
            },
            essentialInfo(){
                $('#lawInspection').removeClass('yes-select').addClass('no-select');
                $('#essentialInfo').removeClass('no-select').addClass('yes-select');
                $('#garbage').removeClass('yes-select').addClass('no-select');
                $('.dialog-content').removeClass('amap-container');
                $('.dialog-content').css('background', 'none');
                this.clickEssentialInfo();
            },
            garbage(){
                $('#lawInspection').removeClass('yes-select').addClass('no-select');
                $('#essentialInfo').removeClass('yes-select').addClass('no-select');
                $('#garbage').removeClass('no-select').addClass('yes-select');
                this.clickGarbage();
            },
            /**
             * Description:点击“执法检查”按钮触发
             * Author:ybt
             * Date:2020/12/18
             */
            clickLawInspection(type){
                let listData = [
                    {content: '制定生活垃圾分类日常管理制度。', image: [], fraction: 10, isHeGe: 0},
                    {content: '建立管理台账。', image: [], fraction: 15, isHeGe: 0},
                    {content: '开展生活垃圾分类知识宣传。', image: [], fraction: 10, isHeGe: 0},
                    {content: '规范设置生活垃圾分类收集容器。', image: [], fraction: 10, isHeGe: 0},
                    {content: '明确不同种类生活垃圾投放时间、地点，分类收集和贮存。', image: [], fraction: 10, isHeGe: 0},
                    {content: '个人是否按照生活垃圾分类管理人公告要求进行投放。', image: [], fraction: 5, isHeGe: 0},
                    {content: '对不符合投放要求的行为，予以劝告、制止。', image: [], fraction: 5, isHeGe: 0},
                    {content: '生活垃圾是否交由有资质的单位进行收集运输。', image: [], fraction: 10, isHeGe: 0},
                    {content: '已分类投放的生活垃圾是否有混合收集现象。', image: [], fraction: 10, isHeGe: 0},
                    {content: '已分类收集的生活垃圾是否有混合运输的现象。', image: [], fraction: 10, isHeGe: 0},
                    {content: '生活垃圾收集、运输后是否复位收集容器并清洁作业场地。', image: [], fraction: 5, isHeGe: 0},
                ];
                let dialogBodyHtml = '<div class="law-inspection">';
                dialogBodyHtml += '<div class="list-name"><span>生活垃圾分类执行检查工作表</span>';


                if(type === 1){
                    dialogBodyHtml += '<div class="fen-time"><div class="you-image" style="color: #36d65d;">100</div><div class="item-time"><span style="color: #36d65d;">优</span><span>12-14 09:12:52</span></div></div></div>';
                }else if(type === 2){
                    dialogBodyHtml += '<div class="fen-time"><div class="liang-image" style="color: #e9a725;">90</div><div class="item-time"><span style="color: #e9a725;">良</span><span>12-01 13:23</span></div></div></div>';
                }else if(type === 3){
                    dialogBodyHtml += '<div class="fen-time"><div class="yiban-image" style="color: #e94b91;">80</div><div class="item-time"><span style="color: #e94b91;">一般</span><span>12-01 13:23</span></div></div></div>';
                }

                dialogBodyHtml += '<ul class="list-content">';
                listData.forEach( (item,index) => {
                    if (item.isHeGe === 0) {
                        dialogBodyHtml += '<li><span>' + (index + 1) + '、' + item.content + '<img src="../../assets/img/garbageClass/default-image.png" /></span><span style="color: #ffe700">' + item.fraction + '分</span></li>';
                    } else if (item.isHeGe === 1) {
                        dialogBodyHtml += '<li style="color: #e91a2b;"><span>' + (index + 1) + '、' + item.content + '<img src="../../assets/img/garbageClass/default-image.png" /></span><span>' + item.fraction + '分</span></li>';
                    }
                });
                dialogBodyHtml += '</ul></div>';
                $(".dialog-name").html('高科·朗山小区');
                $("#dialogContent").html(dialogBodyHtml);
            },
            /**
             * Description:点击“基本信息”按钮触发
             * Author:ybt
             * Date:2020/12/18
             */
            clickEssentialInfo(){
                let dialogBodyHtml = '<div class="essential-info">';
                dialogBodyHtml  += '<div class="image-box"><img src="../../assets/img/garbageClass/no-image.png" /></div>';
                dialogBodyHtml  += '<ul class="content-info">';
                dialogBodyHtml  += '<li><span class="item-name">所属街办：</span><span class="item-content">丈八街道</span></li>';
                dialogBodyHtml  += '<li><span class="item-name">所属社区：</span><span class="item-content">枫林绿洲社区</span></li>';
                dialogBodyHtml  += '<li><span class="item-name">是否将分类教育纳入教育体系：</span><span class="item-content">否</span></li>';
                dialogBodyHtml  += '<li><span class="item-name">主体类别：</span><span class="item-content">小区</span></li>';
                dialogBodyHtml  += '<li><span class="item-name">是否具备四分类投放设施：</span><span class="item-content">是</span></li>';
                dialogBodyHtml  += '<li><span class="item-name">是否建立四分类投放设施管理台账：</span><span class="item-content">是</span></li>';
                dialogBodyHtml  += '<li><span class="item-name">是否建立四分类垃圾产生量台账：</span><span class="item-content">是</span></li>';
                dialogBodyHtml  += '<li><span class="item-name">业务负责人：</span><span class="item-content">刘俊峰</span></li>';
                dialogBodyHtml  += '<li><span class="item-name">手机号码：</span><span class="item-content">13669245321</span></li>';
                dialogBodyHtml  += '<li><span class="item-name">志愿者人数：</span><span class="item-content">0</span></li>';
                dialogBodyHtml  += '<li><span class="item-name">垃圾桶位置数量：</span><span class="item-content">1个</span></li>';
                dialogBodyHtml  += '<li><span class="item-name">投放时间：</span><span class="item-content">6:00-7:00,17:00-21:00</span></li>';
                dialogBodyHtml  += '<li><span class="item-name">清运时间：</span><span class="item-content">7:00-9:00</span></li>';
                dialogBodyHtml  += '<li><span class="item-name">是否开展定时定点投放：</span><span class="item-content">是</span></li>';
                dialogBodyHtml += '</ul></div>';
                $(".dialog-name").html('雅荷智能花园');
                $("#dialogContent").html(dialogBodyHtml);
            },
            /**
             * Description:点击“垃圾桶布设”按钮触发
             * Author:ybt
             * Date:2020/12/18
             */
            clickGarbage(){
                let icon = new AMap.Icon({
                    size: new AMap.Size(30, 30),
                    image: '',
                    imageSize: new AMap.Size(25,25)
                });

                this.dialogMap = new AMap.Map("dialogContent", {
                    mapStyle: "amap://styles/6f8a9c431c03a423de43182d250f1a75",
                    zoom: 14,
                    viewMode: "3D",
                    center: [108.976877, 34.222629],
                    features: ["bg", "road", "building"],
                    resizeEnable: true
                });
                this.dialogMap.setFitView();// 执行定位
                let marker = new AMap.Marker({
                    position: [108.880729032214,34.207253369619],
                    icon:icon
                });
                marker.setMap(this.dialogMap);
                this.dialogMap.setCenter([108.880729032214,34.207253369619]);
                $(".dialog-name").html('高科·朗山小区');
            },
            /**
             * Description:单位检查等级情况列表数据
             * Author:ybt
             * Date:2020/12/18
             */
            initUnitList(){
                let Ddata = [
                    {'name':'海棠别馆','time':'2020/120/9 09:21:25','score':90,'level':'优等'},
                    {'name':'含光佳苑小区','time':'2020/12/11 08:11:39','score':90,'level':'优等'},
                    {'name':'西安高新第七小学','time':'2020/12/12 09:07:40','score':90,'level':'优等'},
                    {'name':'雁塔法院小区','time':'2020/12/09 09:29:15','score':90,'level':'优等'},
                    {'name':'唐南香榭','time':'2020/12/08 08:46:31','score':90,'level':'优等'},
                    {'name':'枫叶苑北区','time':'2020/12/11 09:56:21','score':90,'level':'优等'},
                    {'name':'西安高新第三中学	','time':'2020/12/07 09:40:16','score':90,'level':'优等'},
                    {'name':'西安雁塔区曹里小学','time':'2020/12/07 08:07:18','score':90,'level':'优等'},
                    {'name':'雁塔区利君明天幼儿园','time':'2020/12/10 09:55:12','score':90,'level':'优等'},
                    {'name':'唐延国际','time':'2020/12/08 08:50:43','score':90,'level':'优等'},
                    {'name':'泰祥花园小区','time':'2020/12/08 09:45:43','score':90,'level':'优等'},
                    {'name':'交通集团','time':'2020/12/09 09:38:35','score':90,'level':'优等'},
                    {'name':'橡树星座','time':'2020/12/07 09:50:51','score':90,'level':'优等'},
                    {'name':'望庭国际','time':'2020/12/10 09:37:18','score':90,'level':'优等'},
                    {'name':'西安高新第五小学','time':'2020/12/09 09:06:08','score':90,'level':'优等'},
                    {'name':'西安高新第三小学','time':'2020/12/10 08:27:14','score':90,'level':'优等'},
                    {'name':'草堂科技企业加速器','time':'2020/12/13 08:37:12','score':90,'level':'优等'},
                    {'name':'雁塔区吉的堡望庭幼儿园	','time':'2020/12/11 08:18:16','score':90,'level':'优等'},
                    {'name':'西安高新第二小学','time':'2020/12/13 09:47:36','score':	90,'level':'优等'},
                    {'name':'亮丽大厦','time':'2020/12/13 09:00:42','score':90,'level':'优等'},
                    {'name':'粤汉国际','time':'2020/12/11 08:06:31','score':90,'level':'优等'},
                    {'name':'丈八街道机关','time':'2020/12/10 09:38:57','score':90,'level':'优等'},
                    {'name':'高新一小东校区','time':'2020/12/13 09:50:43','score':90,'level':'优等'},
                    {'name':'贝九夏日景色幼儿园','time':'2020/12/08 08:34:31','score':90,'level':'优等'},
                    {'name':'九鼎城','time':'2020/12/13 09:03:17','score':90,'level':'优等'},
                    {'name':'五米魔方','time':'2020/12/13 08:57:49','score':90,'level':'优等'},
                    {'name':'龙记观澜山','time':'2020/12/13 08:19:21','score':	90,'level':'优等'},
                    {'name':'旗远锦樾','time':'2020/12/11 09:49:12','score':90,'level':'优等'},
                    {'name':'双旗寨小学','time':'2020/12/11 09:04:52','score':90,'level':'优等'},
                    {'name':'玫瑰公馆','time':'2020/12/13 09:54:13','score':90,'level':'优等'},
                    {'name':'万科翡翠天誉','time':'2020/12/13 09:43:12','score':90,'level':'优等'},
                    {'name':'环亚花园','time':'2020/12/13 09:01:34','score':90,'level':'优等'},
                    {'name':'锦业76号','time':'2020/12/11 08:49:15','score':90,'level':'优等'},
                    {'name':'云顶园小区','time':'2020/12/12 08:17:24','score':	90,'level':'优等'},
                    {'name':'捷瑞新时代','time':'2020/12/12 08:55:47','score':90,'level':'优等'},
                    {'name':'米罗蓝山','time':'2020/12/09 08:40:00','score':90,'level':'优等'},
                    {'name':'高新文理幼儿园','time':'2020/12/12 09:50:17','score':90,'level':'优等'},
                    {'name':'复地忧尚小区','time':'2020/12/11 08:24:06','score':90,'level':'优等'},
                    {'name':'西安市高新区双水磨幼儿园','time':'2020/12/11 09:17:14','score':90,'level':'优等'},
                    {'name':'付村幼儿园','time':'2020/12/10 08:54:42','score':90,'level':'优等'},
                    {'name':'城市风景·八号府邸','time':'2020/12/08 09:15:17','score':90,'level':'优等'},
                    {'name':'高科尚都','time':'2020/12/09 09:01:04','score':90,'level':'优等'},
                    {'name':'金泰新理城	','time':'2020/12/11 09:50:59','score':90,'level':'优等'},
                    {'name':'西安万达广场商业管理有限公司高新分公司（高新万达广场）','time':'2020/12/12 09:09:16','score':90,'level':'优等'},
                    {'name':'创业物业软件园示范区物业服务处','time':'2020/12/10 09:20:23','score':90,'level':'优等'},
                    {'name':'水晶城小区','time':'2020/12/11 09:50:14','score':85,'level':'优等'},
                    {'name':'左岸春天小区','time':'2020/12/12 09:23:25','score':85,'level':'优等'},
                    {'name':'省考试中心','time':'2020/12/13 08:17:34','score':85,'level':'优等'},
                    {'name':'坤元TIME	','time':'2020/12/13 09:04:20','score':85,'level':'优等'},
                    {'name':'阳光曼哈顿	','time':'2020/12/08 08:01:15','score':85,'level':'优等'},

                ];

                let dynamicHtml = '';
                Ddata.forEach((item, index) => {
                    dynamicHtml += '<li>'
                        +'<span>'+ (index+1) +'</span>'
                        +'<span title="'+ item.name +'">'+ item.name +'</span>'
                        +'<span>'
                        +'<span class="score">'+ item.score +'</span><span class="grade1">（'+ item.level +'）</span>'
                        +'</span>'
                        +'<span>'+ item.time +'</span>'
                        +'</li>';
                });
                dynamicHtml +='<div class="panel-footer"></div>';
                $('#dynamicListBox').html(dynamicHtml);
                this.listScrolling();
            },
            /**
             * Description:单位检查等级情况列表滚动
             * Author:ybt
             * Date:2020/12/18
             */
            listScrolling(){
                if (this.MyMar !== null) {
                    clearInterval(this.MyMar);
                    this.MyMar = null;
                }
                let speed = 60;
                document.getElementById("dynamicListBox1").innerHTML = document.getElementById("dynamicListBox").innerHTML;
                function Marquee() {
                    if (document.getElementById("dynamicListBox1").offsetHeight - document.getElementById("dynamicList").scrollTop <= 0) {
                        document.getElementById("dynamicList").scrollTop -= document.getElementById("dynamicListBox").offsetHeight;
                    } else {
                        document.getElementById("dynamicList").scrollTop++;
                    }
                }
                this.MyMar = setInterval(Marquee, speed);
                document.getElementById("dynamicList").onmouseover = () => {
                    clearInterval(this.MyMar);
                };
                document.getElementById("dynamicList").onmouseout = () => {
                    this.MyMar = setInterval(Marquee, speed);
                }
            }
        },
        mounted(){
            document.title = "生活垃圾分类综合监管平台";
            $('#screen').css('display', 'block');
            $('#outScreen').css('display', 'none');
            $('.el-dialog__wrapper').hide();
            // 初始化高德地图
            this.initMap(geoJSON);
            // 初始化“每日检查单位数据统计”统计图
            this.initInspectChart();
            // 红黑榜切换操作
            this.redBlackList(1);

            this.initNowListData();
        }
    }
</script>

<style lang="less">
    .garbage-class{
        width: 100%;
        height: 13.5rem;
        display: flex;
        flex-direction: column;
        background-color: #000127;
        line-height: 1.15;
        position: relative;
        overflow-x: hidden;
        user-select: none;
        font-family: 'FZLTZH_GBK';
        color: #ffffff;
        #myMap {
            width: 100%;
            height: 13.5rem;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 1;
        }
        // 弹出层
        .el-dialog__wrapper{
            position: absolute;
            top: 0;
            left: 0;
            width: 24rem;
            height: 13.5rem;
            z-index: 9999;
            opacity: 0;
            background: rgba(0, 0, 0, 0.9);
            display: flex;
            justify-content: center;
            align-items: center;
            user-select: none;
            .el-dialog{
                width: 15.3125rem;
                height: 9rem;
                border: 2px solid #084292;
                background: rgba(0, 0, 0, 0.5);
                display: flex;
                flex-direction: column;
                .el-dialog__header{
                    position: relative;
                    border-bottom: 2px solid #084292;
                    height: 1.225rem;
                    line-height: 1.225rem;
                    padding: 0 0.5rem;
                    .toolbox{
                        position: absolute;
                        top: 0;
                        right: 0;
                        display: flex;
                        flex-direction: row;
                        .screen-dialog{
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            width: 0.25rem;
                            height: 0.25rem;
                            background-color: #093e8a;
                            margin-right: 0.0375rem;
                            cursor: pointer;
                            img{
                                width: 0.175rem;
                                height: 0.175rem;
                            }
                            &:hover{
                                background-color: #0981e0;
                            }
                        }
                        .close-dialog{
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            width: 0.25rem;
                            height: 0.25rem;
                            background-color: #093e8a;
                            cursor: pointer;
                            img{
                                width: 0.2rem;
                                height: 0.2rem;
                            }
                            &:hover{
                                background-color: #0981e0;
                            }
                        }
                    }
                    .dialog-name{
                        color: #00e9ff;
                        font-size: 0.4rem;
                    }
                    ul{
                        position: absolute;
                        top: 0.6rem;
                        right: 0.375rem;
                        display: flex;
                        li{
                            width: 1.375rem;
                            height: 0.45rem;
                            line-height: 0.45rem;
                            text-align: center;
                            margin-right: 0.125rem;
                            font-size: 0.225rem;
                            cursor: pointer;
                            &:hover{
                                border: 2px solid #2d88ce;
                                background: linear-gradient(to bottom, #273aa6 0%, #0a112e 50%, #273aa6 100%);
                                background: -webkit-linear-gradient(bottom, #273aa6 0%, #0a112e 50%, #273aa6 100%);
                                background: -o-linear-gradient(bottom, #273aa6 0%, #0a112e 50%, #273aa6 100%);
                                background: -ms-linear-gradient(bottom, #273aa6 0%, #0a112e 50%, #273aa6 100%);
                            }
                        }
                        .yes-select{
                            border: 2px solid #2d88ce;
                            background: linear-gradient(to bottom, #273aa6 0%, #0a112e 50%, #273aa6 100%);
                            background: -webkit-linear-gradient(bottom, #273aa6 0%, #0a112e 50%, #273aa6 100%);
                            background: -o-linear-gradient(bottom, #273aa6 0%, #0a112e 50%, #273aa6 100%);
                            background: -ms-linear-gradient(bottom, #273aa6 0%, #0a112e 50%, #273aa6 100%);
                        }
                        .no-select{
                            border: 2px solid #536577;
                            background: linear-gradient(to bottom, #3e435d 0%, #0a112e 50%, #3e435d 100%);
                            background: -webkit-linear-gradient(bottom, #3e435d 0%, #0a112e 50%, #3e435d 100%);
                            background: -o-linear-gradient(bottom, #3e435d 0%, #0a112e 50%, #3e435d 100%);
                            background: -ms-linear-gradient(bottom, #3e435d 0%, #0a112e 50%, #3e435d 100%);
                        }
                    }
                }
                .el-dialog__body{
                    flex: 1;
                    .dialog-content{
                        display: flex;
                        width: 100%;
                        height: 100%;
                        .law-inspection{
                            display: flex;
                            flex-direction: column;
                            flex: 1;
                            .list-name{
                                position: relative;
                                height: 1.0625rem;
                                line-height: 1.0625rem;
                                text-align: center;
                                color: #00e9ff;
                                font-size: 0.35rem;
                                .fen-time{
                                    position: absolute;
                                    top: 0.175rem;
                                    right: 1.075rem;
                                    display: flex;
                                    flex-direction: row;
                                    .you-image{
                                        width: 0.7625rem;
                                        height: 0.7625rem;
                                        line-height: 0.7625rem;
                                        background: url(../../assets/img/garbageClass/you.png) no-repeat;
                                        background-size: 100% 100%;
                                        font-size: 0.375rem;
                                        text-align: center;
                                        font-family: auto;
                                    }
                                    .item-time{
                                        display: flex;
                                        flex-direction: column;
                                        span:first-of-type{
                                            font-size: 0.3rem;
                                            width: 0.5rem;
                                            line-height: 0.45rem;
                                        }
                                        span:last-of-type{
                                            font-size: 0.175rem;
                                            color: #fff;
                                            line-height: 0.25rem;
                                            padding-left: 0.125rem;
                                        }
                                    }
                                }
                            }
                            .list-content{
                                display: flex;
                                flex-direction: column;
                                flex: 1;
                                font-size: 0.25rem;
                                li{
                                    display: flex;
                                    flex-direction: row;
                                    flex: 2;
                                    padding: 0 0.375rem;
                                    span:first-of-type{
                                        flex: 1;
                                    }
                                    span:last-of-type{
                                        width: 2rem;
                                        text-align: center;
                                    }
                                    img{
                                        cursor: pointer;
                                    }
                                }
                            }
                        }
                        .essential-info{
                            display: flex;
                            flex-direction: row;
                            flex: 1;
                            padding: 0.3125rem;
                            .image-box{
                                width: 8.75rem; // 700px
                                border: 1px solid #052536;
                                display: flex;
                                justify-content: center;
                                align-items: center;
                            }
                            .content-info{
                                display: flex;
                                flex-direction: column;
                                flex: 1;
                                margin-left: 0.25rem;
                                li{
                                    font-size: 0.225rem;
                                    line-height: 0.4875rem;
                                    font-family: auto;
                                    .item-name{
                                        color: #00ecff;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
        /* 头部样式 */
        header {
            position: relative;
            width: 100%;
            height: 0.925rem;
            z-index: 9;
            .header-bg{
                width: 100%;
                height: 0.925rem;
                line-height: 0.85rem;
                background: url(../../assets/img/garbageClass/head-bg.png) no-repeat;
                background-size: 100% 100%;
                background-position: 0.225rem center;
                font-size: 0.4625rem;
                color: #00eaff;
                text-align: center;
            }
            .collapse-box{
                position: absolute;
                top: 0.15rem;
                right: 0.2rem;
                img{
                    width: 0.3rem; // 24px
                    height: 0.25rem; // 20px
                    cursor: pointer;
                }
                #openPage{
                    display: none;
                }
                #closePage{
                    display: block;
                }
            }
            .main-switch{
                position: absolute;
                left: calc(50% - 2.9375rem);
                top: 0.8rem;
                width: 5.8rem; // 464px
                height: 0.525rem;// 42px
                line-height: 0.525rem;// 42px
                display: flex;
                flex-direction: row;
                li{
                    flex: 1;
                    color: #ffffff;
                    font-size: 0.2375rem;
                    text-align: center;
                    cursor: pointer;
                }
                .left-button{
                    background: url(../../assets/img/garbageClass/left-switch-block1.png) no-repeat;
                    background-size: 100% 100%;
                }
                .right-button{
                    background: url(../../assets/img/garbageClass/right-switch-block2.png) no-repeat;
                    background-size: 100% 100%;
                    border-left: 1px solid #455c5e;
                }
            }
        }

        /* 主体内容样式 */
        .main-box{
            display: flex;
            flex: 1;
            .content-area{
                display: flex;
                flex: 1;
                position: relative;
                /* 主体内容公共样式——开始 */
                .border-box{
                    position: relative;
                    border: 1px solid #026dbf;
                    &::before {
                        position: absolute;
                        top: -2px;
                        left: -2px;
                        width: 0.2rem;
                        height: 0.2rem;
                        border-top: 4px solid #6ce8fa;
                        border-left: 4px solid #6ce8fa;
                        content: "";
                        z-index: 100;
                    }
                    &::after {
                        position: absolute;
                        top: -2px;
                        right: -2px;
                        width: 0.2rem;
                        height: 0.2rem;
                        border-right: 4px solid #6ce8fa;
                        border-top: 4px solid #6ce8fa;
                        content: "";
                        z-index: 100;
                    }
                    .panel-footer{
                        position: absolute;
                        bottom: 0;
                        left: 0;
                        width: 100%;
                        &::before {
                            position: absolute;
                            left: -2px;
                            bottom: -2px;
                            width: 0.2rem;
                            height: 0.2rem;
                            border-left: 4px solid #6ce8fa;
                            border-bottom: 4px solid #6ce8fa;
                            content: "";
                        }
                        &::after {
                            position: absolute;
                            bottom: -2px;
                            right: -2px;
                            width: 0.2rem;
                            height: 0.2rem;
                            border-right: 4px solid #6ce8fa;
                            border-bottom: 4px solid #6ce8fa;
                            content: "";
                        }
                    }
                }
                .overflow-box{
                    width: 100%;
                    height: 100%;
                    overflow: hidden;
                    display: flex;
                    flex-direction: column;
                }
                .block-item-name{
                    width: 100%;
                    height: 0.55rem;
                    line-height: 0.55rem;
                    background-color: rgba(2, 108, 191, 0.6);
                    font-size: 0.25rem;
                    color: #00eaff;
                    text-align: center;
                }
                /* 主体内容公共样式——结束 */
                .left-content-row{
                    width: 7.625rem; // 610px
                    z-index: 10;
                    position: relative;
                    #firstContentBox{
                        display: flex;
                        flex-direction: column;
                        width: 100%;
                        height: 12.575rem;
                        background: linear-gradient(to right, rgba(0, 1, 39, 0.9),rgba(4, 9, 63, 0.75));
                        padding: 0.375rem 0 0.1875rem 0.1875rem;
                        overflow: hidden;
                        /* 执法检查情况 */
                        .law-inspect{
                            width: 100%;
                            height: 7.575rem; // 606px
                            .top-title{
                                position: absolute;
                                top: -0.3125rem;
                                left: 0.625rem;
                                width: 6.1375rem;
                                height: 0.6rem;
                                line-height: 0.6rem;
                                text-align: center;
                                background: url(../../assets/img/garbageClass/border-block.png) no-repeat;
                                background-size: 100% 100%;
                                font-size: 0.2625rem;
                                color: #00eaff;
                            }
                            #endTime{
                                position: absolute;
                                top: -0.35rem;
                                right: 0;
                                font-size: 0.2rem;
                            }
                            .overflow-box{
                                padding-top: 0.3rem; // 24px
                                .inspect-number{
                                    display: flex;
                                    flex-direction: row;
                                    height: 0.875rem; // 70px
                                    padding: 0.0625rem;
                                    li{
                                        display: flex;
                                        flex-direction: column;
                                        justify-content: center;
                                        flex: 1;
                                        font-size: 0.2rem;
                                        .number-p{
                                            text-align: center;
                                            span:first-of-type{
                                                color: #fda72b;
                                                font-size: 0.3rem;
                                            }
                                        }
                                        .name-p{
                                            text-align: center;
                                            line-height: 0.325rem;
                                        }
                                    }
                                    li:first-of-type{
                                        border-right: 1px solid #14428a;
                                    }
                                }
                            }
                        }
                        .every-day-chart{
                            width: 100%;
                            height: 4.225rem;
                            margin-top: 0.1875rem;
                            #unitInspectChart{
                                width: 7.4125rem;
                                height: 3.65rem;
                            }
                        }
                    }
                    .dynamic-data{
                        height: 6.2rem;
                        display: flex;
                        flex-direction: column;
                        overflow: hidden;
                        li{
                            display: flex;
                            flex-direction: row;
                            flex: 1;
                            font-size: 0.2rem;
                            line-height: 0.5625rem; // 45px
                            text-align: center;
                            &>span:nth-of-type(1){
                                width: 1rem; // 80px
                            }
                            &>span:nth-of-type(2){
                                width: 3.025rem; // 242px
                                text-align: left;
                                overflow: hidden;
                                text-overflow: ellipsis;
                                white-space: nowrap;
                            }
                            &>span:nth-of-type(3){
                                width: 1.25rem; // 100px
                                cursor: pointer;
                                .score{
                                    color: #ffffff;
                                    border-bottom: 1px solid #ffffff;
                                }
                                .grade1{
                                    font-size: 0.175rem;
                                    color: #03ac57;
                                    border-bottom: 1px solid #03ac57;
                                }
                                .grade2{
                                    font-size: 0.175rem;
                                    color: #fda72b;
                                    border-bottom: 1px solid #fda72b;
                                }
                                .grade3{
                                    font-size: 0.175rem;
                                    color: #f10078;
                                    border-bottom: 1px solid #f10078;
                                }
                            }
                            &>span:nth-of-type(4){
                                width: 3rem;
                            }
                        }
                        li + li{
                            border-top: 1px solid #132f6b;
                        }
                    }
                    #secondContentBox{
                        position: absolute;
                        left: -7.65rem;
                        display: flex;
                        flex-direction: column;
                        width: 100%;
                        height: 12.575rem;
                        background: linear-gradient(to right, rgba(0, 1, 39, 0.9),rgba(4, 9, 63, 0.75));
                        padding: 0.375rem 0 0.1875rem 0.1875rem;
                        overflow: hidden;
                        display: none;
                        .gradation{
                            width: 100%;
                            height: 5.075rem; // 406px
                            .top-title{
                                position: absolute;
                                top: -0.3125rem;
                                left: 0.625rem;
                                width: 6.1375rem;
                                height: 0.6rem;
                                line-height: 0.6rem;
                                text-align: center;
                                background: url(../../assets/img/garbageClass/border-block.png) no-repeat;
                                background-size: 100% 100%;
                                font-size: 0.2625rem;
                                color: #00eaff;
                            }
                            #startEndTime{
                                position: absolute;
                                top: -0.35rem;
                                right: 0;
                                font-size: 0.2rem;
                            }
                            .overflow-box{
                                padding-top: 0.3rem; // 24px
                                .company-number{
                                    display: flex;
                                    flex-direction: row;
                                    height: 1.1625rem; // 93px
                                    padding: 0.1875rem;
                                    border-bottom: 1px solid #14428a;
                                    li{
                                        display: flex;
                                        flex-direction: column;
                                        justify-content: center;
                                        flex: 2;
                                        font-size: 0.2rem;
                                        .number-p{
                                            text-align: center;
                                            span:first-of-type{
                                                font-size: 0.3rem;
                                            }
                                            #superiorNumber{
                                                color: #36d65d;
                                            }
                                            #goodNumber{
                                                color: #e9a725;
                                            }
                                            #commonlyNumber{
                                                color: #e94b91;
                                            }
                                            #noCheckNumber{
                                                color: #cecece;
                                            }
                                        }
                                        .name-p{
                                            text-align: center;
                                            line-height: 0.325rem;
                                        }
                                    }
                                    li + li{
                                        border-left: 1px solid #14428a;
                                    }
                                }
                                #inspectCompany{
                                    width: 7.4125rem;
                                    height: 3.5875rem;
                                }
                            }
                        }
                        .conpany-inspect-list{
                            margin-top: 0.1875rem;
                            height: 6.75rem; // 540px
                            .dynamic-data li{
                                line-height: 0.6rem !important; // 48px
                            }
                        }
                    }
                }
                .center-content-row{
                    flex: 1;
                    z-index: -1;
                }
                .right-content-row{
                    position: absolute;
                    right: -7.65rem;
                    display: flex;
                    flex-direction: column;
                    width: 7.625rem; // 610px
                    background: linear-gradient(to left, rgba(0, 1, 39, 0.9),rgba(4, 9, 63, 0.75));
                    z-index: 10;
                    padding: 0 0.1875rem 0.1875rem 0;
                    // 单位检查问题统计
                    .problem-statistics{
                        width: 100%;
                        height: 5.3125rem; // 425px
                        .problem-list{
                            display: flex;
                            flex-direction: column;
                            width: 100%;
                            height: 4.7375rem; // 379px
                            li{
                                display: flex;
                                flex-direction: row;
                                flex: 2;
                                font-size: 0.2rem;
                                line-height: 0.425rem;

                                .number{
                                    width: 0.625rem; // 50px
                                    display: flex;
                                    justify-content: center;
                                    align-items: center;
                                    .num-number{
                                        font-size: 0.175rem;
                                        color: #fff;
                                        width: 0.225rem;
                                        height: 0.225rem;
                                        line-height: 0.225rem;
                                        border-radius: 0.0375rem;
                                        text-align: center;
                                    }
                                    .num-one{
                                        background-color: #ff0000;
                                    }
                                    .num-two{
                                        background-color: #ff6500;
                                    }
                                    .num-three{
                                        background-color: #ffb500;
                                    }
                                    .num-other{
                                        background-color: #004aff;
                                    }
                                }
                                .describe{
                                    width: 5.5375rem; // 443px
                                }
                                .percentage{
                                    width: 1.25rem; // 100px
                                    text-align: center;
                                }
                            }
                        }
                    }
                    // 单位检查等级情况统计
                    .situation-statistics{
                        width: 100%;
                        height: 2.95rem; // 236px
                        margin-top: 0.1875rem;
                        #situationChart{
                            width: 7.4125rem;
                            height: 2.375rem; // 190px
                        }
                    }
                    // 红黑榜
                    .red-black{
                        position: relative;
                        width: 100%;
                        height: 3.75rem; // 300px
                        margin-top: 0.1875rem;
                        .switch-button{
                            position: absolute;
                            top: 0.1375rem;
                            right: 0;
                            display: flex;
                            flex-direction: row;
                            li{
                                width: 0.675rem;
                                height: 0.2875rem;
                                line-height: 0.2875rem;
                                text-align: center;
                                margin-right: 0.125rem;
                                border: 1px solid #0151a1;
                                cursor: pointer;
                                &:hover{
                                    background-color: #012354;
                                    color: #fff;
                                }
                            }
                            .select-yes{
                                background-color: #012354;
                                color: #fff;
                            }
                            .select-no{
                                background-color: #012f65;
                                color: #006bd8;
                            }
                        }
                        .list-box{
                            width: 100%;
                            height: 3.175rem; // 254px
                            display: flex;
                            flex-direction: column;
                            font-size: 0.2rem;
                            li{
                                display: flex;
                                flex-direction: row;
                                flex: 1;
                                line-height: 0.625rem;
                                text-align: center;
                                .number{
                                    width: 1rem; // 80px
                                    display: flex;
                                    justify-content: center;
                                    align-items: center;
                                    .num-number{
                                        font-size: 0.175rem;
                                        color: #fff;
                                        width: 0.225rem;
                                        height: 0.225rem;
                                        line-height: 0.225rem;
                                        border-radius: 0.0375rem;
                                    }
                                    .num-1{
                                        background-color: #ff0000;
                                    }
                                    .num-2{
                                        background-color: #ff6500;
                                    }
                                    .num-3{
                                        background-color: #ffb500;
                                    }
                                    .num-4{
                                        background-color: #004aff;
                                    }
                                    .num-5{
                                        background-color: #004aff;
                                    }
                                }
                                .name{
                                    text-align: left;
                                    flex: 1;
                                }
                                .fraction{
                                    width: 1.5rem; // 120px
                                }
                                .grade{
                                    width: 1.5rem; // 120px
                                }
                                .grade1{
                                    color: #36d65d;
                                }
                                .grade2{
                                    color: #e9a725;
                                }
                                .grade3{
                                    color: #e94b91;
                                }
                            }
                            li + li{
                                border-top: 1px solid #132f6b;
                            }
                        }
                    }
                }
            }
        }

        .ntl {
            position: absolute;
            /*right: 7.925rem;*/
            right: 0.3rem;
            bottom: 0.22rem;
            /* width: 1.35rem; */
            z-index: 99;
            color: #ffffff;
            padding: 0.125rem;
            background: rgba(3, 3, 44, 0.6);
            border: 2px solid #01648a;
            border-radius: 0.0625rem;
        }
        .ntl p {
            line-height: 0.3rem;
        }
        .ntl p i {
            display: inline-block;
            width: 0.23rem;
            height: 0.23rem;
            vertical-align: -0.05rem;
            border-radius: 0.0375rem;
            margin-right: 0.125rem;
        }
        .ntl p img{
            width: 0.23rem;
            height: 0.23rem;
            vertical-align: -0.05rem;
            border-radius: 0.0375rem;
            margin-right: 0.125rem;
        }
    }
</style>
